<!-- 生成代码二级页面：代码配置 -->
<!-- created by lx 2023/6/8 -->
<template>
  <div class="list-card-container">
    <!--步骤条-->
    <a-card title="生成代码配置" class="general-card">
      <a-steps
        changeable
        type="navigation"
        :current="currentStep"
        @change="handleStepChange"
      >
        <a-step>基本信息</a-step>
        <a-step>字段信息</a-step>
        <a-step>生成信息</a-step>
      </a-steps>

      <!--主体-->
      <div style="padding: 24px">
        <keep-alive>
          <a-spin :loading="loading" style="width: 100%">
            <BasicInfoEdit
              v-if="currentStep === StepTabs.BASIC"
              :form="basicForm"
              @back="goBack"
              @save="saveForm"
            />
            <ColumnsInfoEdit
              v-if="currentStep === StepTabs.COLUMNS"
              :columns="fieldList"
              @back="goBack"
              @save="saveColumns"
            />
            <GenerateInfoEdit
              v-if="currentStep === StepTabs.GENERATE"
              :form="basicForm"
              @back="goBack"
              @save="saveForm"
            />
          </a-spin>
        </keep-alive>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup name="CodegenEdit">
  import { ref, computed, unref, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useTabBarStore } from '@/store';
  import {
    CodegenConfigRecord,
    ConfigFormModel,
  } from '@/api/infrastructure/model/codegenModel';
  import {
    detailCodegenRecord,
    updateCodegenRecord,
  } from '@/api/infrastructure/codegen';
  import { Message } from '@arco-design/web-vue';
  import { TagProps } from '@/store/modules/tab-bar/types';
  import { CODEGEN_NAME } from '@/router/constants';
  import BasicInfoEdit from './components/basic-info-edit.vue';
  import ColumnsInfoEdit from './components/columns-info-edit.vue';
  import GenerateInfoEdit from './components/generate-info-edit.vue';

  const router = useRouter();
  const route = useRoute();
  const tabBarStore = useTabBarStore();
  // eslint-disable-next-line no-shadow
  enum StepTabs {
    BASIC = 1,
    COLUMNS = 2,
    GENERATE = 3,
  }

  const loading = ref<boolean>(false);

  const tableId = computed(() => {
    const { id } = unref(router.currentRoute).query;
    return id || '';
  });

  const basicForm = ref();
  const fieldList = ref<any[]>([]);
  const detailConfig = async () => {
    loading.value = true;
    try {
      const { data } = await detailCodegenRecord(tableId.value as string);
      fieldList.value = data.columns;
      basicForm.value = data.table;
    } finally {
      loading.value = false;
    }
  };

  const currentStep = ref<number>(1);
  const handleStepChange = (current: number) => {
    currentStep.value = current;
  };

  onMounted(() => {
    if (tableId.value !== '') {
      detailConfig();
    }
  });

  const saveForm = async (form: ConfigFormModel) => {
    const reqdata = {
      table: { ...basicForm.value, ...form },
      columns: fieldList.value,
    };
    updateConfig(reqdata);
  };
  const saveColumns = (fields: any[]) => {
    const reqdata = {
      table: basicForm.value,
      columns: fields,
    };
    updateConfig(reqdata);
  };
  const updateConfig = async (reqdata: CodegenConfigRecord) => {
    try {
      await updateCodegenRecord(reqdata);
      Message.success('保存成功');
    } finally {
      // empty
      detailConfig();
    }
  };
  const tagList = computed(() => {
    return tabBarStore.getTabList;
  });
  const goBack = () => {
    router.push({ name: CODEGEN_NAME, replace: true });
    const index = tagList.value.findIndex(
      (el) => el.fullPath === route.fullPath
    );
    tabBarStore.deleteTag(index, unref(router.currentRoute) as TagProps);
  };
</script>

<style lang="less" scoped>
  .list-card-container {
    padding: 20px;
    border-radius: var(--border-radius-default);
  }
</style>
